<template>
     <div id="Industry">
         <div class="jx-content">
            <div class="fr">
                <div class="button-style savefn"  @click="sortFn">案例热度排序</div>
            </div>
            <div class="student-index-list">
                 <el-row :gutter="40">
                    <el-col :span="4" >
                        <div class="add" @click="add">
                            <i class="iconfont icon-jiahao "></i>
                            <p >添加行业</p>
                        </div>
                    </el-col>
                    <el-col :span="4" v-for='(item,index) in listcase' :key="index">
                        <router-link :to="{path:'/Admin/Production/IndustryCaseDetail',query: {id: item.businessCaseId}}">
                            <div class="grid-content"  >
                                <img :src="item.businessCaseIcon" />
                                <p class="title" :title="item.businessCaseName">{{item.businessCaseName}}</p>
                                <p class="title">{{item.caseNum}}</p>
                            </div>
                        </router-link>
                        <div class="tips-top">
                            <i class="iconfont icon-ico_compile_thick" @click="editFn(item.businessCaseName,item.businessCaseIconId,item.businessCaseId)" ></i>
                            <i class="iconfont icon-Group-" @click="deleteFn(item.businessCaseId)"></i>
                         </div>
                    </el-col>
                </el-row>
            </div>
            <el-dialog :close-on-click-modal="false"  :title="dialogTitle" :visible.sync="dialogFormVisible" width="660px" @close="closeDialog">
                <el-form :model="form" label-width="100px" :rules="rules" ref="form">
                    <el-form-item label="行业名称 :"  prop="title">
                        <el-input v-model="form.title" placeholder="请输入行业名称" style="width: 50%;" maxlength="15" @input="dataInput" ></el-input>
                        <p style=" position:absolute;  left: 215px; bottom: 6px; font-size:12px; color:#bbbbbb">{{form.num}}/15</p>
                    </el-form-item>
                    <div class="iconcase"><span style="color:#F56C6C">*</span> 行业图标 :</div>
                    <carousel ref="origin" :superurl="superurl" :isActive="form.isActive" v-model="form.isActive" @chooseVal='chooseVal'></carousel>
                 </el-form>
                <div slot="footer" class="dialog-footer" style="text-align:center;">
                    <div class="button-style savefn"  @click="saveForm('form')" >确 认</div>
                </div>
            </el-dialog>
             <el-dialog :close-on-click-modal="false" title="案例热度排序" :visible.sync="dialogTableVisible"   border >
            <el-table :data="tableData6" @sort-change='sortChange' ref="hotSort" >
                <el-table-column  type="index" label="序号" width="100">
                    <template slot-scope="scope"><span>{{scope.$index+(currentPage - 1) * pagesize + 1}}</span> </template>
                </el-table-column>
                <el-table-column  label="案例名称" prop='caseTitle'> </el-table-column>
                <el-table-column  label="行业" prop='businessName'></el-table-column>
                <el-table-column prop="studentStar" sortable='custom' label="学生点赞数">
                </el-table-column>
                <el-table-column prop="teacherStar" sortable='custom' label="老师点赞数">
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"

                    :current-page="currentPage"
                    :page-size="pagesize"
                    layout="total, prev, pager, next, jumper"
                    :total="totalCount"
                    style="margin-top: 20px; text-align: center;">
            </el-pagination>
            <!-- <div slot="footer" class="dialog-footer" style="text-align:center;">
                <el-button type="primary" @click="sureFn()">确认</el-button>
            </div> -->
        </el-dialog>
         </div>
    </div>
</template>

<script>
    import carousel from '@/components/carousel'
    export default {
        components: {
           carousel
        },
        data() {
            return {
                sort:'',
                id:'',
                listData: [],
                dialogFormVisible:false,
                dialogTableVisible:false,
                dialogForm: false,
                dialogTitle:'',
                currentPage: 1,
                pagesize: 10,
                totalCount: 1000,
                form:{
                    title:'',
                    isActive:'',
                    num:0,
                },
                aflag:'',
                listcase:[],
                superurl: [],
                tableData6: [],
                rules: {
                    title: [
                        { required: true, message: '请输入行业名称', trigger: 'blur' },
                    ]
                },
            }
        },
        created () {
            this.init()
        },
        methods:{
             page(){
                let self = this
                self.$http.get('/tes/business/case/starRankList?pageNum='+self.currentPage+'&pagesize='+self.pagesize+'&orderStatus='+self.sort).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                      this.tableData6 = res.data.content
                      self.totalCount = res.data.total
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            init(){
                let self = this
                self.$http.get('/tes/business/case/businesscaseList').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.listcase = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
             //图片集合
            imgShow(){
                let self = this
                self.$http.get('/tes/unauthorized/config?keys=caseIcon').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                     self.superurl=res.data.caseIcon
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
             //信息字数
            dataInput(){
                var txtVal = this.form.title.length;
                this.form.num = 15 - txtVal
            },
            //添加
            add(){
                this.imgShow()
                this.aflag=2
                this.dialogFormVisible = true
                this.dialogTitle='添加行业名称'
                this.form.title='',
                this.form.isActive=''
                this.form.num = 0
                this.showDiag()
           },
           showDiag(){
                let self = this;
                this.$nextTick(function(){
                    self.$refs.origin.calleft=0
                 })
            },
           //关闭弹窗
             closeDialog(){
                 this.$refs.form.resetFields()
            },
            //改变子组件
            chooseVal(id,current){
                let self=this
                this.form.isActive =id
            },
             //排序
            sortChange(column, prop, order){
               // console.log(column.order)
               // console.log(column.prop)
               //let sort=''
               let self = this
                if(column.order=='ascending' && column.prop=='teacherStar'){
                   self.sort=1
                }else if(column.order=='descending' && column.prop=='teacherStar'){
                   self.sort=2
                }else if(column.order=='ascending' && column.prop=='studentStar'){
                    self.sort=3
                }else if(column.order=='descending' && column.prop=='studentStar'){
                   self.sort=4
                }
               //console.log(sort)
                self.$http.get('/tes/business/case/starRankList?pageNum='+self.currentPage+'&pagesize='+self.pagesize+'&orderStatus='+self.sort).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                       self.tableData6= res.data.content
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //热度按钮
            sortFn(){
                this.dialogTableVisible=true
                this.currentPage = 1
                this.sort=''
                this.page()
                this.$nextTick(() => {
                    this.$refs.hotSort.clearSort()
                })
            },
            //删除
           deleteFn(id){
              let self = this;
              self.$confirm('是否删除选中?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
                    self.$http.get('/tes/business/case/delBusinessCaseById?businessCaseId='+id+'',
                    ).then((response) => {
						let res = response.data;
						if(res.code == '200'){
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
							self.init()
						}else{
                            self.$message.error(res.message)
                        }
					},(err) => {
						console.log('err');
					})
				}).catch(() => {
			 });
           },
            //表格分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage
                this.page()

            },
           //编辑
            editFn(name,id,csaeid) {
               let self = this
               this.aflag = 1
               this.dialogTitle ='编辑行业名称'
               this.dialogFormVisible = true
               this.form.title = name
               this.form.isActive = id
               this.kid = csaeid
               this.form.num= 15-(name.length)
               self.showDiag()
                self.$http.get('/tes/unauthorized/config?keys=caseIcon').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                      self.superurl=res.data.caseIcon
                        for (var i = 0; i < self.superurl.length; i++) {
                           if (self.superurl[i].id === id) {
                                self.superurl.unshift(self.superurl[i]);
                                self.superurl.splice(i+1, 1);
                                self.id=self.superurl[i].id
                                break
                           }
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //保存
            saveForm(form){
                let self = this
                if(self.aflag==1){  //编辑
                  self.$refs[form].validate((valid) => {
                    if (valid) {
                        self.$http.post('/tes/business/case/saveBusinessCase',{
                            businessCaseId:self.kid,
                            businessCaseName:self.form.title,
                            businessCaseIconId:self.form.isActive
                        }).then((response) => {
                            let res = response.data
                            if(res.code == '200') {
                                this.$message({
                                    message: '保存成功',
                                    type: 'success'
                                })
                            self.dialogFormVisible=false
                            self.init()
                            self.$refs[form].resetFields();
                            }else{
                                this.$message.error(res.message)
                            }
                        })
                    }
                })
                }else if(self.aflag==2){   //添加
                    if(self.form.isActive==''){
                    self.$message({
                        message: '请选择行业图片',
                        type: 'warning'
                    })
                    return
                    }
                self.$refs[form].validate((valid) => {
                    if (valid) {
                        const loading = this.$loading({
                            lock: true,
                            text: '文件保存中...',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        })
                        self.$http.post('/tes/business/case/addBusinessCase',{
                            businessCaseName:self.form.title,
                            businessCaseIconId:self.form.isActive
                        }).then((response) => {
                            let res = response.data
                            if(res.code == '200') {
                                this.$message({
                                    message: '保存成功',
                                    type: 'success'
                                })
                            self.dialogFormVisible=false
                            self.init()
                            self.$refs[form].resetFields();
                             loading.close() 
                            }else{
                                this.$message.error(res.message)
                                 loading.close() 
                            }
                        })
                    }
                })

               }
            }
        }
    }
</script>
<style scoped>
.el-form>>>.el-input__inner{
    width: 200px;
}
</style>
<style lang="scss" scoped>
 @import "./../../../styles/layout/color_variables";
 #Industry {
    width: $width;
    margin: 20px auto;
    color: #727272;
     .student-index-list{
        clear:both;
        padding-top: 30px;
       .el-row {
           margin-bottom: 20px;
            .add{
              border: 1px dashed #999;
              height: 188px;
              text-align:center;
              border-radius: 6px;
              color: #999;
              font-size: 14px;
              background: #fff;
              cursor: pointer;
                i{
                    display: inline-block;
                    margin-top: 70px
                }
              
                &:hover{
                    box-shadow: 0 0px 20px #c4c4c4;
                    border: 1px dashed #1277eb;
                    color: #1277eb;
                }
            }
            .el-col {
                border-radius: 4px;
                margin-bottom: 40px;
                position: relative;
               a{
                    &>.grid-content{
                        background: #495172;
                        border-radius: 6px;
                        height: 190px;
                        &>img{
                            // width: 70px;
                            // height: 70px;
                            margin: 0 auto;
                            padding-top: 36px;
                            display: block
                        }

                        &:hover{
                            box-shadow: 0 5px 20px #c4c4c4;
                            cursor: pointer;
                            // transition: all 0.3s;
                            // transform: scale(1.05);

                        }
                        .title{
                            text-align: center;
                            font-size: 16px;
                            overflow: hidden;
                            color: #fff;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            padding: 20px 5px 0 5px;
                        }
                    }
               }
               .tips-top{
                    .icon-Group-{
                        color: #fff;
                        font-size: 18px;
                        position: absolute;
                        right:26px;
                        top: 10px;
                        cursor: pointer;
                        width: 20px;
                        height: 20px;
                        z-index: 8;

                    }
                    .icon-ico_compile_thick{
                        color: #fff;
                        font-size: 14px;
                        position: absolute;
                        bottom: 13px;
                        right: 26px;
                        cursor: pointer;
                        width: 20px;
                        height: 20px;
                        z-index: 8;
                    }
               }
            }
       }
    }
     .iconcase{
        margin-left: 14px;
    }
 }
</style>
